<template>
  <van-dialog v-model="show" show-cancel-button confirm-button-text="申请提现" :before-close="beforeClose">
    <van-cell-group class="balance_panel">
        <div class="record_text" @click="pickRecord"><u>提现记录</u></div>
        <div class="balance_text"><b>{{user.credit2.toFixed(2)}}</b></div>
        <div style="font-size: 14px;" @click="pickAll"><u>全部提现</u></div>
        <div class="remark_text">提现申请，客服审核后直接转到微信钱包</div>
    </van-cell-group>  
    <van-field v-model="money" label="提现金额" type="number" :min="0.01"/>
  </van-dialog>
</template>
<script>
import { BALANCE_PICK } from "@/api/user";  
export default {
  name: 'pick-money',

  props: {
      visible: {
          default: false,
          type: Boolean
      }
  },
  
  data() {
    return {
      show: false,
      money: '',
    };
  },

  watch: {
      visible() {
          this.show = this.visible;
      },
      show() {
          this.$emit('visibleChange', this.show);
      }
  },

  methods: {
    beforeClose(action, done) {
      let vm = this;  
      if (action === 'confirm') {
        if (this.money < 0.01 || this.money > this.user.credit2) {
            this.$toast({message: "请输入正确的提现金额"});
            done(false);
            return;
        }
        this.$dialog.confirm({
            title: '确认提现',
            message: '是否确认提现？'
            }).then(() => {
                done(true);
                vm.pickMoney();
            }).catch(() => {
                done(false);
            });
      } else {
        done(true);
      }
    },

    pickRecord() {
        this.$router.push({name: 'user-pick-record'});
    },

    pickAll() {
        this.money = this.user.credit2;
        let vm = this;
        this.beforeClose('confirm', (result => {
            vm.show = !result;
        }))
    },

    pickMoney() {
        this.$reqPost(BALANCE_PICK, {memberId: this.user.id, money: this.money}).then(res => {
            this.$toast.success("提现申请成功");
            this.user.credit2 -= this.money;
        }).catch(() => {
            this.$toast.fail("提现申请失败");
        });
    }
  }
}
</script>
<style lang="scss" scoped>
.balance_panel {
    padding: 20px 20px 10px 20px;
    text-align: center;
}

.balance_text {
    color: $red;
    font-size: 32px;
    margin-bottom: 10px;

    ::before {
        content: '¥';
        font-size: 12px;
        margin-right: 3px;
    }
}

.record_text {
    position: absolute;
    top: 2px;
    right: 5px;
    font-size: 12px;
    color: green;
}

.remark_text {
    font-size: 10px;
    color: gray;
    padding: 5px 8px;
}
</style>
